import { BoxGeometry, Material, Mesh, MeshBasicMaterial } from "three";
import { CSS3DObject } from "three/examples/jsm/renderers/CSS3DRenderer";


// 创建带CSS3D子对象的Box
export function createBoxWithCSS3DChild(element,width, height, depth = 10) {
    // DOM元素高宽
    element.style.width = `${width}px`;
    element.style.height = `${height}px`;
    
    // 创建CSS3D对象
    const cssObject = new CSS3DObject(element);
    cssObject.position.z = depth / 2 + 0.1; // 放在Box前面
    
    // 创建Box网格
    const geometry = new BoxGeometry(width, height, depth);
    const material = new MeshBasicMaterial({ 
        color: 0x0000ff,
        wireframe: false,
        transparent: true,
        opacity: 0.3
    });
    const box = new Mesh(geometry, material);
    
    // 建立父子关系
    box.add(cssObject);
    
    return box;
}

export interface DomObjectOptions {
    width?: number;
    height?: number;
    depth?: number;
    color?: number|string;
    opacity?: number;
    wireframe?: boolean;
}

export class DomObject extends Mesh {

    object:CSS3DObject;
    domElement:HTMLElement;

    private _size;

    constructor(element, {
        width,      
        height, 
        depth = 10,
        color = 0x0000ff,
        opacity = 0.3,
        wireframe = false
    }: DomObjectOptions = {}) {
      // 配置DOM元素
      if(width!=undefined&&height!=undefined){
        element.style.width = `${width}px`;
        element.style.height = `${height}px`;
      }else{
        // 强制重绘以获取准确尺寸
        document.body.appendChild(element);
        const rect = element.getBoundingClientRect();
        document.body.removeChild(element);
        width = rect.width;
        height = rect.height;
      }
      
      
      // 创建CSS3D对象
      const cssObject = new CSS3DObject(element);
      cssObject.position.z = depth / 2 + 0.1;
      
      // 创建几何体和材质
      const geometry = new BoxGeometry(width, height, depth);
      const material = new MeshBasicMaterial({ 
        color,
        wireframe,
        transparent: opacity < 1,
        opacity
      });
      
      // 调用父类构造函数
      super(geometry, material);
      
      // 添加CSS3D子对象
      this.add(cssObject);
      
      // 保存引用
      this.object = cssObject;
      this.domElement = element;
      this._size = { width, height, depth };
      
      this.userData={html:{}};
    }
    
    get size() {
      return {...this._size};
    }
    
    updateSize(width, height, depth = this._size.depth) {
      this._size = { width, height, depth };
      
      // 更新几何体
      this.geometry.dispose();
      this.geometry = new BoxGeometry(width, height, depth);
      
      // 更新CSS3D对象位置
      this.object.position.z = depth / 2 + 0.1;
    }
    
    dispose() {
      // 清理资源
      this.geometry.dispose();
      if(this.material instanceof Material){
        this.material.dispose();
      }else{
        this.material.forEach(material => {
          material.dispose();
        });
      }
      
      if (this.parent) this.parent.remove(this);
    }
  }